<template>
  <div class="brock">
    <section>
      <el-button type="primary" class="el-icon-plus" @click="addbotfun()">
        增加</el-button
      >
      <el-button type="danger" class="el-icon-delete" @click="delsfun()"
        >批量删除</el-button
      >
    </section>
    <el-dialog
      :title="title"
      @close="closeFun"
      :visible.sync="dialogFormVisible"
    >
      <img
        :src="imgurl"
        v-if="title == '编辑轮播图'"
        width="100px"
        @click="chingimgfun()"
        :class="{ hide: !imgblo }"
      />
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :limit="limt"
        :http-request="uploadAjax"
        :on-change="onchangimg"
        ref="upload"
        :class="{ okupkod: imgurl }"
      >
        <!-- <img :src="imgurl" v-if="title=='编辑轮播图'"  width="100px"
      @click="chingimgfun()"
      :class="{hide:!imgblo}"

    
      > -->
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="跳转链接" prop="region">
          <el-input v-model="ruleForm.region"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      height="750"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="200px"> </el-table-column>
      <el-table-column prop="carouselUrl" label="轮播图" width="120px">
        <template slot-scope="scope">
          <img :src="scope.row.carouselUrl" alt="图片" width="50px" />
        </template>
      </el-table-column>

      <el-table-column prop="redirectUrl" label="跳转链接" width="120">
      </el-table-column>

      <el-table-column prop="carouselRank" label="排序" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="createTime" label="添加时间" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-popover placement="top" width="260px" height="250px">
            <p>这一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" @click="cancol()">取消</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                >确定</el-button
              >
            </div>

            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "增加轮播图",
      tableData: [],
      multipleSelection: [],
      totalCount: 0,
      pagesize: 10,

      dialogFormVisible: false,
      ruleForm: {
        name: "",
        region: "",
        // redirect: "",
        // carousel: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },

      imgurl: "",
      limt: 1,
      imgblo: true,
      carouselId: "",
    };
  },

  mounted() {
    //刚进入页面
    this.getfun(1);
  },
  methods: {
    chingimgfun() {
      this.$refs["upload"].$refs["upload-inner"].handleClick(); //单机图片可以切换 上传
      this.imgblo = false;
    },
    addbotfun() {
      (this.title = "增加轮播图"), (this.dialogFormVisible = true);
      this.imgurl = "";
    },
    closeFun() {
      //关闭弹框事件
      this.$refs.upload.clearFiles(); //弹窗关闭了 清空图片
      this.ruleForm.name = "";
      this.ruleForm.region = "";
    },
    async delsfun() {
      //批量删除
      if (this.multipleSelection.length > 0) {
        let array = [];
        this.multipleSelection.map((itme) => {
          array.push(itme.carouselId);
        });
        let result = await this.$http.delete("/carousels", {
          data: {
            ids: array,
          },
        });
        this.getfun(1);
      } else {
        console.log("里面没东西");
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    cancol() {
      document.body.click();
    },
    onchangimg(file, FileList) {
      //当内容改变时调用ajax请求
      this.uploadAjax(file);
      // console.log(file,FileList);
    },
    async uploadAjax(file) {
      //上传图片

      let formData = new FormData();
      formData.append("file", file.raw);
      let result = await this.$http.post("/upload/file", formData);
      console.log(result);
      this.imgurl = result.data;
    },

   
    
    handleCurrentChange(val) {
         this.getfun(val)
    },
    resetForm(formName) {
      //重置按钮
      (this.ruleForm.name = ""), (this.ruleForm.region = "");
    },
    submitForm(formName) {
      //创建按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "增加轮播图") {
            this.addloop();
            console.log("增加轮播图");
          } else {
            this.editofun();
            console.log("编辑按钮");
            this.imgurl = "";
          }
        } else {
          return false;
        }
      });
    },
    async addloop() {
      //增加轮播图
      let result = await this.$http.post("/carousels", {
        carouselRank: this.ruleForm.name,
        carouselUrl: this.imgurl,
        redirectUrl: this.ruleForm.region,
      });
      this.dialogFormVisible = false;
      this.getfun(1);
    },

    async getfun(age) {
      //获取分页

      let result = await this.$http.get("/carousels", {
        params: {
          pageNumber: age,
          pageSize: 10,
        },
      });
      console.log(result);
      // this.totalCount = result.data.totalCount;
      this.tableData = result.data.list;
      // this.imgurl=result.data.list.carouselUrl
    },
    handleEdit(index, row) {
      //修改
      console.log(row);
      (this.title = "编辑轮播图"), (this.carouselId = row.carouselId);
      this.dialogFormVisible = true;
      this.ruleForm.name = row.redirectUrl;
      this.ruleForm.region = row.carouselRank;
      this.imgurl = row.carouselUrl;
    },
    async handleDelete(index, row) {
      //删除
      // console.log(row.carouselId);
      let arry = [row.carouselId];
      let result = await this.$http.delete("/carousels", {
        data: {
          ids: arry,
        },
      });
      this.cancol();
      this.getfun(1);
    },
    async editofun() {
      let result = await this.$http.put("/carousels", {
        //修改图片

        carouselId: this.carouselId,
        carouselRank: this.ruleForm.region,
        carouselUrl: this.imgurl,
        redirectUrl: this.ruleForm.name,
      });
      console.log(result);
      this.dialogFormVisible = false;
      this.getfun(1);
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .okupkod .el-upload--picture-card {
  display: none;
}
.hide {
  display: none;
}
.brock {
  background-color: #409eff;
}
.jz{
  text-align: center;
}
</style>
